<template>
  <a-drawer v-model:open="open"
           width="50%"
           :footer="null"
           title="新增离船申请"
           :keyboard="false"
           :mask-closable="false"
            @close="handleClose"
           @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        class="mt20"
        layout="vertical"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '100%' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row :gutter="40">
        <a-col class="gutter-row" :span="12">
          <a-form-item required>
            <template #label>
              <span class="fw">所在船舶</span>
            </template>
            <a-select v-model:value="formState.suoZaiChuanBo"
                class="w100"
                placeholder="请选择"
                allow-clear
                @change="handleChangeChuanbo"
                style="width: 120px">
              <a-select-option v-for="item in chuanboList" :key="item.id" :value="item.zhongWenMing">{{ item.zhongWenMing }}</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item required>
            <template #label>
              <span class="fw">船员姓名</span>
            </template>
            <a-select
                class="w100"
                placeholder="请选择"
                allow-clear
                style="width: 120px"
                v-model:value="formState.chuanYuanId">
              <a-select-option  v-for="item in chuanyuanList" :key="item.chuanYuanId" :value="item.chuanYuanId">{{ item.chuanYuanMing }}</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item required>
            <template #label>
              <span class="fw">计划下船开始日期</span>
            </template>
            <a-date-picker class="w100" v-model:value.trim="formState.xiaChuanKaiShiRiQi"  maxlength="100"
                           value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="请填写"/>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="12">
          <a-form-item required>
            <template #label>
              <span class="fw">职位</span>
            </template>
            <a-select
                v-model:value="formState.zhiWei"
                ref="select"
                class="w100"
                placeholder="请选择"
                allow-clear
                @change="handleChangeChuanYuanListByZhiwei"
                style="width: 120px">
              <a-select-option  v-for="item in zhiweiList" :key="item" :value="item">{{ item }}</a-select-option>
            </a-select>
          </a-form-item>

<!--          <a-form-item required>
            <template #label>
              <span class="fw">上船日期</span>
            </template>
            <a-date-picker class="w100" v-model:value.trim="formState.shangChuanRiQi"
                           value-format="YYYY-MM-DD" format="YYYY-MM-DD" maxlength="100" placeholder="请填写"/>
          </a-form-item>-->

          <a-form-item required>
            <template #label>
              <span class="fw">计划下船结束日期</span>
            </template>
            <a-date-picker class="w100" v-model:value.trim="formState.xiaChuanJieShuRiQi"
                           value-format="YYYY-MM-DD" format="YYYY-MM-DD" maxlength="100" placeholder="请填写"/>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="24">
          <a-form-item required>
            <template #label>
              <div class="flex flex-wrap" >
                <span class="fw">离船原因</span>
              </div>
            </template>
            <a-textarea placeholder="请填写" rows="3" v-model:value.trim="formState.liChuanYuanYin"></a-textarea>
            <div class="mt10"><span class="fw">快捷短语：</span><a-checkable-tag
                v-for="(tag) in tagsData"
                :key="tag"
                @change="handleChange(tag)">
              {{ tag }}
            </a-checkable-tag></div>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="12">
          <a-form-item>
            <template #label>
              <span class="fw">预计下次上船</span>
            </template>
            <a-input placeholder="请填写" v-model:value.trim="formState.yuJiXiaCiShangChuan"></a-input>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="12">
          <a-form-item>
            <template #label>
              <span class="fw">是否愿意回船</span>
            </template>
            <a-radio-group v-model:value="formState.huiChuan">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="24">
          <a-form-item>
            <a-button  type="primary" @click.stop.prevent="handleSubmit">
              <PlusOutlined/>
              保存
            </a-button>
            <a-button style="margin-left: 10px" danger type="primary" @click.stop.prevent="handleClose">
              <close-outlined></close-outlined>
              关闭
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>
<script setup>
const chuanboList = ref([]);
const chuanyuanList = ref([]);
const zhiweiList = ref([]);
const userState = useStore.userState()
const open = ref(false);
const addLoading = ref(false);
const formRef = ref({})
const roleArr = ref([])
const emits = defineEmits(["success"])
const newChuanboList = ref([])
const formState = ref({
  suoZaiChuanBo:undefined,
  zhiWei:undefined,
  chuanYuanId:undefined,
  chuanYuanMing:"",
  shangChuanRiQi:"",
  xiaChuanKaiShiRiQi:"",
  xiaChuanJieShuRiQi:"",
  liChuanYuanYin:"",
  yuJiXiaCiShangChuan:"",
  huiChuan:1,  //是否愿意回船。1:是、0:否
});
const tagsData = reactive(['x月份回船', '待派', '考证中','家中有事', '暂不上船', '见习完成','考核不合格', '不续聘', '已上船']);

const handleChangeChuanbo = async (item,e) => {
  const resp = await useGetLiChuanChuanYuanApi(e.key)
  newChuanboList.value = resp.data
  formState.value.zhiWei = undefined
  zhiweiList.value = []
  chuanyuanList.value = []
  formState.value.chuanYuanMing = ""
  formState.value.chuanYuanId = undefined
  zhiweiList.value = resp.data.map((c)=>c.zhiWei)
}

const handleChangeChuanYuanListByZhiwei = async (item) => {
  chuanyuanList.value = newChuanboList.value.find(c=>c.zhiWei==item).chuanYuanVOS
}

const handleChange = (tag, checked) => {
  formState.value.liChuanYuanYin = tag
};

const handleLoadChuaboData = async () => {
  var res = await useLoadChuanBoXinXiBiaoApi()
  chuanboList.value = res.data
}

const handleChangeXiaChuan = (e) => {
  formState.value.xiaChuanYuanId = e
  var user = chuanyuanList.value.find(obj=>obj.id = e);
  formState.value.chuanYuanMing = user.xingMing
}

// 验证规则
const rules = {
  account: [ {required: true, message: '请输入账号', trigger: 'blur'}],
  username: [ {required: true, message: '请输入昵称', trigger: 'blur'}],
}

const handleOpen = async (record) => {
  open.value = true
  await handleLoadChuaboData()
}

const handleSubmit = async () => {
  try {
    addLoading.value = true
    if(!formState.value.suoZaiChuanBo){
      useMessage().error("请输入所在船舶")
      addLoading.value = false
      return false;
    }
    if(!formState.value.zhiWei){
      useMessage().error("请输入职位")
      addLoading.value = false
      return false;
    }
    if(!formState.value.chuanYuanId){
      useMessage().error("请输入船员")
      addLoading.value = false
      return false;
    }
    if(!formState.value.xiaChuanKaiShiRiQi){
      useMessage().error("请输入计划下船开始日期")
      addLoading.value = false
      return false;
    }
    if(!formState.value.xiaChuanJieShuRiQi){
      useMessage().error("请输入计划下船结束日期")
      addLoading.value = false
      return false;
    }
    if(!formState.value.liChuanYuanYin){
      useMessage().error("请输入离船原因")
      addLoading.value = false
      return false;
    }

    await useSaveUpdateLiChuanShenQingApi(formState.value)
    addLoading.value = false
    useMessage().success("添加成功")
    emits("success")
    handleClose()
  }catch (e){
    addLoading.value = false
    useMessage().error(e.msg)
  }
}

const handleClose = () => {
  formState.value = {
    suoZaiChuanBo:undefined,
    zhiWei:undefined,
    chuanYuanId:undefined,
    chuanYuanMing:"",
    shangChuanRiQi:"",
    xiaChuanKaiShiRiQi:"",
    xiaChuanJieShuRiQi:"",
    liChuanYuanYin:"",
    yuJiXiaCiShangChuan:"",
    huiChuan:1,  //是否愿意回船。1:是、0:否
  }
  open.value = false
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>
